Menú efecto persiana con CSS

Me gusta el efecto persiana en los menús, uno de los más conocidos es de la librería Mootools con ella ha sido creado "image menu" y los resultados son verdaderamente atractivos.

Pizcos lo aplicó con la librería jQuery y a decir verdad resulta mucho más práctico puesto que son mayoría los que utilizan jQuery para otras rutinas y de esta forma no se ven obligados a usar Mootools.

Hay personas que les gusta este tipo de menú pero desisten de la idea pensando que es algo difícil y no lo es, sino más bien algo laborioso.
Por eso, cuando vi este menú con efecto persiana y creado con CSS pensé que era la solución para aquellos que pisan seguro. Además, al ser creado con CSS nos olvidamos del script y eso nos ahorra complicaciones.

Ver ejemplo

La diferencia entre los otros menús es que el espacio que utiliza para la imagen está dividido en dos partes, uno para la imagen y otro para texto que bien podría ser un título o una breve descripción.

¿Tienes ganas de probarlo? antes de hacerlo es conveniente tener las imágenes que vamos a añadir preparadas, el menú lleva unas imágenes de 82 x 82, lo que haremos será subirlas a una entrada del blog (luego la podemos guardar en borrador o suprimir la entrada conservando imagen, aunque siempre está más segura en borrador)

Para empezar nos situamos en plantilla Edición de HTML buscamos ]]></b:skin> y justo antes añadimos lo siguiente:

/* Menú
---------------------- */
#menu {
margin:0;
padding:0;
width:45em;
height:8.5em;
overflow:hidden;
background:#000;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:#000;
}
#menu li a:hover img {
opacity:1;
}
#menu li a:hover span {
width:11em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
#menu .h3 {
margin:0 5px;
padding:0;
font-size:1.1em;
color:#0aa;
}
.outer {
background:transparent;
font-size:0.9em;
}

Guardamos los cambios y nos dirigimos a la plantilla de diseño donde añadiremos un elemento de página clicando en HTML/Javascript allí añadimos:

<div class="outer">
<ul id="menu">
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3">Texto</b><br />
Breve descripción
</span>
</a>
</li>
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3">Texto</b><br />
Breve descripción
</span>
</a>
</li>
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3">Texto</b><br />
Breve descripción
</span>
</a>
</li>
<li>
<a href="url-enlace">
<img src="url-imagen" alt="painting" title="painting" />
<span>
<b class="h2">Título</b><br />
<b class="h3"> Texto</b><br />
Breve descripción
</span>
</a>
</li>
</ul>
</div>

En este mismo elemento de página donde dice "url-imagen" añadimos la url que nos ha generado Blogger en la entrada que creamos. Donde "url-enlace" añadimos la url de la página que vamos a enlazar de forma que coincida la url de la página con la imagen que tenemos asignada.

El texto lo modificamos según viene reflejado, en "Título" escribimos el título, donde "Texto" es un pequeño espacio que podemos aprovechar para añadir otro texto pero sin excederse.

En "Breve descripción" tenemos espacio para unas breves líneas de texto.

Al pasar el puntero sobre la imagen nos muestra un texto que podemos modificar en title="painting" sustituyendo painting por el título a mostrar.

Guardamos y nos dirigimos a plantilla Edición de HTML situándonos en el código que añadimos justo antes de ]]></b:skin>

Podemos cambiar los colores en:

#menu li a:hover {
(Es el fondo de de cada caja donde se incluye imagen y texto)

#menu li a:hover span {
(Color de la fuente "Breve descripción)

#menu .h2 {
(Color de la fuente "Título" )

#menu .h3 {
(Color de la fuente "Texto" )

Podemos variar la opacidad de la imagen al pasar el puntero en:
#menu li a:hover img { aumentando en opacity:1;

La opacidad de la imagen tal y como la vemos la modificaremos en:
#menu li a img {

El tamaño de fuente en font-size y el tipo de fuente en font-variant.

Fuente: Stu Nicholls, en su página ofrece otros muchos modelos de menús con CSS.

!Suerte¡